<template>
  <div>
    <quill-editor
        :options="editorOption"
        v-model="content"/>
    <hr/>
    富文本编辑器中的内容是：{{content}}

  </div>
</template>

<script>
import {quillEditor} from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

import quillConfig from '../../common/js/quill-config'

export default {
  components: { // 引入一个 自定义的components组件
    'quill-editor':quillEditor //QuillEditor  ---默认名称：quill-editor
  },
  data() {
    //数据
    return {
      content: "", //绑定数据
      editorOption: quillConfig
    }
  },
  methods: {
    onEditorReady(editor) {
    }, // 准备编辑器
    onEditorBlur() {
    }, // 失去焦点事件
    onEditorFocus() {
    }, // 获得焦点事件
    onEditorChange() {
    }, // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  }
}
</script>
<!-- css设置样式的优先级：外部css文件 低于 页面中style样式  低于 标签中直接设置css样式 -->
<style scoped>

</style>